<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聘途</title>
    <link rel="icon" href="/image/favicon.ico" type="image/x-icon"/>
    <script src="/vue.min.js"></script>
    <script src="/axios.min.js"></script>
    <style>
        .home-page {
            border: none;
            height: 1200px;
            background-image: linear-gradient(to bottom, #d1eded, white);
            background-position: to center;

        }

        .menu {
            border: none;
            height: 5%;
            background-color: #202329;
            display: flex;
            align-items: center;
            /*垂直居中*/
        }

        .menu1 {
            list-style-type: none;
            margin-left: 5%;
            overflow: hidden;
        }

        .menu2 {
            text-align: center;
            color: white;
            float: left;
            width: 140px;
            font-size: large;


        }

        .menu2:hover {
            color: #00b4b3;
        }

        .usercenter {
            list-style-type: none;
            overflow: hidden;
            float: left;
            color: rgb(255, 255, 255);
            font-size: large;
            display: flex;
            margin-left: 800px;

        }

        .usercenter:hover {
            color: #00b4b3;
        }


        .image {
            border: none;
            height: 11.5%;
            background-image: url('/image/求职者首页图片1.jpeg');
            background-size: 100% 100%;
        }


        .search1 {
            width: 600px;
            height: 45px;
            background-color: white;
            margin-top: 4%;
            margin-left: 32%;
            border-radius: 15px;

        }

        #searchselect {
            border: none;
            outline: none;
            width: 100px;
            height: 40px;
            border-radius: 15px;


        }

        .search1 input {
            margin-left: 0px;
            border: none;
            outline: none;
            width: 410px;
            height: 40px;
            border-radius: 15px;
            font-size: large;
        }

        #bt {
            background-color: white;
            width: 70px;
            border: none;
            outline: none;
            cursor: pointer;
            /* 将鼠标样式改为指针样式 */
            transition: all 0.3s ease;
            /* 添加过渡效果 */
        }

        #bt:hover {
            background-color: #aababa;
        }

        .sortandimage {
            display: flex;
            margin-left: 10%;
            margin-top: 5%;
        }

        .sort {
            border: black solid 1px;
            width: 500px;
            height: 600px;
            border-color: aliceblue;
            background-color: white;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;

            /* 设置格子之间的间隔 */
        }

        .imagemany {
            margin-left: 5%;
            border: none;
            width: 900px;
            height: 600px;
            border-color: aliceblue;
            background-image: url('/image/轮播图1.jpg');
            background-size: 100% 100%;

        }

        .sort-title {
            position: absolute;
            font-size: 25px;
            margin-top: 40px;
            margin-left: 50px;

        }


        .jobsort {
            position: absolute;
            margin-top: 120px;
            width: 160px;
            height: 70px;
            border: none;
            background-color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 16px;



        }

        .jobsort:hover {
            background-color: #aababa;
        }

        .pagination {
            margin-top: 220px;
        }

        .page {

            border: rgb(222, 216, 216) solid 1px;
            background-color: rgb(255, 255, 255);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .page:hover {
            color: #aababa;
        }
    </style>
</head>

<body onload="fun1()">
    <div id="app">
        <div class="home-page">
            <div class="menu">
                <h2 style="margin-left: 10%;color: #2fdfd1;">聘途</h2>
                <ul class="menu1">
                    <a href="首页.html">
                        <li class="menu2">首页</li>
                    </a>
                    <a href="推荐.html">
                        <li class="menu2">推荐</li>
                    </a>
                    <a href="首页公司.html">
                        <li class="menu2">公司</li>
                    </a>
                    <a href="APP.html">
                        <li class="menu2">APP</li>
                    </a>

                </ul>

                <a href="修改密码.html">
                    <li class="usercenter"> {{ userInfo.sname }}</li>
                </a>

            </div>

            <div class="image"></div>

            <div class="search">
                <form @submit.prevent="submitForm">
                    <div class="search1">
                        <select id="searchselect" v-model="searchselect">
                            <option value="岗位">按岗位搜索</option>

                            <option value="公司">按公司搜索</option>
                        </select>

                        <input type="text" v-model="searchinput" placeholder="请输入搜索内容">
                        <input type="submit" value="搜索" id="bt">

                    </div>
                </form>
                <div class="sortandimage">


                    <div class="sort">

                        <p class="sort-title"><b>岗位分类</b></p>

                        <div class="sort1" v-for="(jobSort, index) in jobsortPage1" :key="index">



                            <button class="jobsort" @click="Jobsort(jobSort)">
                                <p style="color: rgb(73, 70, 70);">{{jobSort.pname}}</p>
                            </button>


                        </div>

                        <div class="pagination">
                            <button class="page" @click="prevPage" :disabled="currentPage === 1">上一页</button>
                            <button class="page" @click="nextPage" :disabled="currentPage === 3">下一页</button>
                        </div>





                    </div>



                    <div class="imagemany">

                    </div>

                </div>



            </div>

        </div>
    </div>
    <script>
        var userInfo = JSON.parse(sessionStorage.getItem('userData'));


        var count = 1;
        function fun1() {
            count++;
            if (count > 3) {
                count = 1;
            }
            var url = "/image/轮播图" + count + ".jpg";
            document.querySelector('.imagemany').style.backgroundImage = "url('" + url + "')";
        }
        setInterval(fun1, 2000); // 每两秒调用 fun1 函数
        new Vue({
            el: '#app',
            data: {
                searchselect: '岗位',
                searchinput: '',
                jobsort: '',
                currentPage: 1, // 当前页码
                jobsortPage1: [], // 第一组按钮数据
                jobsortPage2: [], // 第二组按钮数据

            },

            created() {
                this.getsort()


            },
            methods: {

                Jobsort(jobSort) {
                    console.log(jobSort);
                    // 可以使用 sessionStorage 保存 jobInfo
                    sessionStorage.setItem('jobSort', JSON.stringify(jobSort));
                    window.location.href = "首页分类.html";

                },


                getsort() {

                    axios.post("http://localhost:8080/hqdx/seeker/PositionClassify")
                        .then(response => {

                            /*  console.log(response.data.data.items) */
                            this.jobsort = response.data.data.items;

                            this.jobsortPage1 = this.jobsort.slice(0, 11);//初始第一页数据


                        })
                        .catch(error => {
                            console.log(error);
                        });
                },

                nextPage() {
                    if (this.currentPage < this.jobsort.length) {
                        this.currentPage += 1;
                        // 更新 jobsortPage1 和 jobsortPage2 的数据
                        this.jobsortPage1 = this.jobsort.slice((this.currentPage - 1) * 11, this.currentPage * 11);
                        this.jobsortPage2 = this.jobsort.slice(this.currentPage * 11, (this.currentPage + 1) * 11);
                    }
                  
                    
                },
                prevPage() {
                    if (this.currentPage > 1) {
                        this.currentPage -= 1;
                        // 更新 jobsortPage1 和 jobsortPage2 的数据
                        this.jobsortPage1 = this.jobsort.slice((this.currentPage - 1) * 11, this.currentPage * 11);
                        this.jobsortPage2 = this.jobsort.slice(this.currentPage * 11, (this.currentPage + 1) * 11);
                    }
                },




                submitForm() {


                    let data = new FormData();
                    data.append("choice", this.searchselect);
                    data.append("keyword", this.searchinput);


                    axios.post("http://localhost:8080/hqdx/seeker/searchforPosition", data)
                        .then(response => {
                            if (response.data.success == true) {
                                if (response.data.data.choice2 == '岗位') {
                                    console.log(response.data.data.items)

                                    window.location.href = "岗位分类.html";
                                    sessionStorage.setItem('workinfo', JSON.stringify(response.data.data.items));


                                }

                                else {
                                    console.log(response.data.data.items)
                                    window.location.href = "公司.html";
                                    sessionStorage.setItem('companyinfo', JSON.stringify(response.data.data.items));

                                }


                            }
                            else {
                                alert('无法找到搜索内容')
                            }
                        })
                        .catch(error => {
                            console.log(error);
                        });
                },


            }
        })
    </script>
</body>

</html>